<div class="pub-body">
  <!-- <h1>公司管理</h1> -->
  <!-- 公司列表 -->
  <div class="project">
    <el-button icon="el-icon-plus" class="addBtn" type="primary"
               @click="dialogShow.insertproject=true">新增项目
    </el-button>
    <el-table :data="companyData" border style="width: 100%" height="250"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}">

      <el-table-column  prop="contractNo" label="项目编号"width="200"></el-table-column>
      <el-table-column prop="assetName" label="项目名称"width="200"></el-table-column>
      <el-table-column prop="assetType" label="项目类型"></el-table-column>
      <el-table-column prop="startTime" label="计划开始时间"></el-table-column>
      <el-table-column prop="endTime" label="计划结束时间"></el-table-column>
      <el-table-column prop="construction" label="主要参建单位"></el-table-column>
      <el-table-column fixed="right" label="操作" width="240">
        <template slot-scope="scope">
          <el-button @click="dialogShow.viewProject=true" type="primary"
                     icon="el-icon-tickets" size="small">查看项目
          </el-button>
          <el-button @click="dialogShow.editProject=true" type="warning"
                     icon="el-icon-edit-outline" size="small">编辑项目
          </el-button>

        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--分页-->
  <el-row type="flex" justify="center" style="padding: 20px">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 20, 50, 100]"
      :page-size="5" 
      layout="total, sizes, prev, pager, next, jumper"
      :total="companyData.length">
    </el-pagination>
  </el-row>

  <!--弹框-->

  <!-- 编辑项目 -->
  <el-dialog width="70%" title="编辑项目"
             :visible.sync="dialogShow.editProject">
             <el-form ref="companyFrom" :rules="companyRules" :model="lookbase" 
             label-width="160px">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="assetName" label="项目名称">
            <el-input style="width: 300px;"  v-model="lookbase.assetName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="assetType" label="项目类型">
            <el-input style="width: 300px;"
                      v-model="lookbase.assetType" readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="assetLevel" label="项目层级">
            <el-input style="width: 300px;"
                      v-model="lookbase.assetLevel" readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="statistics" label="是否列统">
            <el-input style="width: 300px;" 
                      v-model="lookbase.statistics" readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="startTime" label="计划开始时间">
            <el-date-picker type="date" 
                            v-model="lookbase.startTime"
                            style="width: 300px;" readonly="readonly"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="endTime" label="计划结束时间">
            <el-date-picker type="date" 
                            v-model="lookbase.endTime"
                            style="width: 300px;" readonly="readonly"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="construction" label="主要参建单位">
            <el-input style="width: 300px;" 
                      v-model="lookbase.construction" readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="investment" label="总投资">
            <el-input style="width: 300px;" 
                      v-model="lookbase.investment" readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="legalUnit" label="项目法人单位">
            <el-input style="width: 300px;" 
                      v-model="lookbase.construction" readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="site" label="建设地点">
            <el-input style="width: 300px;" 
                      v-model="lookbase.legalUnit" readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="success" @click="dialogShow.editNode=true">编辑节点</el-button>
        <el-button type="primary" @click="addCompany('companyFrom')">确认提交</el-button>
        <el-button type="reset" @click="dialogCompany.status=false">取消</el-button>
      </el-form-item>
    </el-form>
    </el-form>
  </el-dialog>

  <!-- 新增项目弹窗 -->
  <el-dialog width="70%" title="新增项目"
             :visible.sync="dialogShow.insertproject">
    <el-form ref="companyFrom" :rules="companyRules" :model="companyFrom"
             label-width="160px">
      <el-row>
        <el-form-item prop="companyTel" label="导入模板类型">
          <el-select style="width: 300px;" v-model="companyFrom.companyTel" placeholder="请选择模板类型"  >
            <el-option   v-for="ptype in template" :value="ptype.name" ></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="assetName" label="项目名称">
            <el-input style="width: 300px;" placeholder="请输入项目名称"
                      v-model="companyFrom.assetName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="assetType" label="项目类型">
            <el-select allow-create filterable
            style="width: 300px;" v-model="companyFrom.assetType" placeholder="请选择项目类型"  >
              <el-option   v-for="ptype in template" :value="ptype.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="assetLevel" label="项目层级">
            <el-input style="width: 300px;" placeholder="请输入项目层级"
                      v-model="companyFrom.assetLevel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="statistics" label="是否列统">
            <el-input style="width: 300px;" placeholder="请输入项目是否列统"
                      v-model="companyFrom.statistics"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="startTime" label="计划开始时间">
            <el-date-picker type="date" placeholder="计划开始时间"
                            v-model="companyFrom.startTime"
                            style="width: 300px;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="endTime" label="计划结束时间">
            <el-date-picker type="date" placeholder="计划结束时间"
                            v-model="companyFrom.endTime"
                            style="width: 300px;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="construction" label="主要参建单位">
            <el-input style="width: 300px;" placeholder="请输入主要参建单位"
                      v-model="companyFrom.construction"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="investment" label="总投资">
            <el-input style="width: 300px;" placeholder="请输入总投资"
                      v-model="companyFrom.investment"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="legalUnit" label="项目法人单位">
            <el-input style="width: 300px;" placeholder="请输入项目法人单位"
                      v-model="companyFrom.legalUnit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="site" label="建设地点">
            <el-input style="width: 300px;" placeholder="请输入建设地点"
                      v-model="companyFrom.site"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="success" @click="editproNodes(companyFrom.companyTel)">编辑节点</el-button>
        <el-button type="info" @click="resetCompany">保存草稿</el-button>
        <el-button type="primary" @click="addCompany('companyFrom')">确认提交</el-button>
        <el-button @click="resetForm('companyFrom')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--编辑项目节点弹窗-->
 
  <el-dialog width="80%" title="节点详情" :visible.sync="editproNodes.status" >
    <!-- this.$alert({{nodedata}}) -->
    <el-table :data="nodedata" row-key="id" :indent="4" height="500" border style="width: 100%" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
      <el-table-column prop="id" label="节点序号" width=""></el-table-column>
      <el-table-column prop="label" label="节点名称" width=""></el-table-column>
      <el-table-column prop="level" label="节点等级" width=""></el-table-column>
      <el-table-column prop="startTime" label="计划开始时间"></el-table-column>
      <el-table-column prop="endTime" label="计划结束时间"></el-table-column>
      <el-table-column prop="plannedHours" label="计划工时"></el-table-column>
      <el-table-column prop="precondition" label="前置条件"></el-table-column>
      <el-table-column prop="responsibleDepartment" label="责任部门"></el-table-column>
      <el-table-column fixed="right" label="操作" width="380">
        <template slot-scope="scope">
          <el-button @click="dialogCompany.status1=true" type="primary"
                     icon="el-icon-edit-outline" size="mini">查看节点
          </el-button>
          <el-button @click="" type="success"
                     icon="el-icon-circle-plus-outline" size="mini">插入子节点
          </el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" >删除节点
          </el-button>

        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <!--编辑节点详情弹窗-->
  <el-dialog width="70%" title="节点详情"
             :visible.sync="dialogCompany.status1">
    <el-form ref="companyFrom" :rules="companyRules" :model="companyFrom"
             label-width="160px">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="assetName" label="节点名称">
            <el-input style="width: 300px;" placeholder="请输入节点名称"
                      v-model="companyFrom.companyName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="assetType" label="节点类型">
            <el-input style="width: 300px;" placeholder="请输入节点类型"
                      v-model="companyFrom.companyContact"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="startTime" label="计划开始时间">
            <el-date-picker type="date" placeholder="计划开始时间"
                            v-model="companyFrom.restrictedType"
                            style="width: 300px;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="endTime" label="计划结束时间">
            <el-date-picker type="date" placeholder="计划结束时间"
                            v-model="companyFrom.restrictedType"
                            style="width: 300px;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="legalUnit" label="计划工时">
            <el-input style="width: 300px;" placeholder="请输入计划工时"
                      v-model="companyFrom.companyName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="site" label="责任人">
            <el-input style="width: 300px;" placeholder="请选择责任人"
                      v-model="companyFrom.companyContact"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary">确认</el-button>
        <el-button type="danger">删除节点</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--查看项目基本信息-->
  <el-dialog width="70%" title="查看项目"
             :visible.sync="dialogShow.viewProject">
    <el-form ref="companyFrom" :rules="companyRules" :model="lookbase" 
             label-width="160px">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="ssetName" label="项目名称">
            <el-input style="width: 300px;"  v-model="lookbase.assetName"
                      readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="assetType" label="项目类型">
            <el-input style="width: 300px;"
                      v-model="lookbase.assetType" readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="assetLevel" label="项目层级">
            <el-input style="width: 300px;"
                      v-model="lookbase.assetLevel" readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="statistics" label="是否列统">
            <el-input style="width: 300px;" 
                      v-model="lookbase.statistics" readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="startTime" label="计划开始时间">
            <el-date-picker type="date" 
                            v-model="lookbase.startTime"
                            style="width: 300px;" readonly="readonly"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="endTime" label="计划结束时间">
            <el-date-picker type="date" 
                            v-model="lookbase.endTime"
                            style="width: 300px;" readonly="readonly"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="construction" label="主要参建单位">
            <el-input style="width: 300px;" 
                      v-model="lookbase.construction" readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="investment" label="总投资">
            <el-input style="width: 300px;" 
                      v-model="lookbase.investment" readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="legalUnit" label="项目法人单位">
            <el-input style="width: 300px;" 
                      v-model="lookbase.construction" readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="site" label="建设地点">
            <el-input style="width: 300px;" 
                      v-model="lookbase.legalUnit" readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="success" @click="dialogShow.viewNode=true">查看节点</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--查看项目节点弹窗-->
  <el-dialog width="80%" title="项目节点" :visible.sync="dialogShow.viewNode">
    <el-table :data="looktaskdata" height="250" row-key="id" :indent="4" border style="width: 100%" :header-cell-style="{background:'#eef1f6',color:'#606266'}" >
      <el-table-column prop="id" label="节点序号" width="180"></el-table-column>
      <el-table-column prop="label" label="节点名称" width="180"></el-table-column>
      <el-table-column prop="level" label="节点等级" width="80"></el-table-column>
      <el-table-column prop="startTime" label="计划开始时间"></el-table-column>
      <el-table-column prop="endTime" label="计划结束时间"></el-table-column>
      <el-table-column prop="plannedHours" label="计划工时"></el-table-column>
      <el-table-column prop="precondition" label="前置条件"></el-table-column>
      <el-table-column prop="responsibleDepartment" label="责任部门"></el-table-column>
      <!--      <el-table-column prop="desc" label="备注"></el-table-column>-->
    </el-table>
  </el-dialog>

  <!-- 查看弹窗 -->
  <el-dialog width="80%" :title="showemplate.title"
             :visible.sync="showemplate.status">
    <!-- 项目节点树 -->
    <el-row :gutter="30">
      <el-col :span="24">
        <el-tree style="height: 500px; overflow: hidden; overflow-y: auto;"
                 class="projectDataTree" default-expand-all :data="looktaskdata"
                 node-key="id" :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span v-if="data.id != 0" @click="() => nodeInfo(data)"
                              style="line-height: 35px; float: left;">{{ node.label }}</span>
                        <span v-else style="line-height: 35px; float: left;">{{ node.label }}</span>
                        <div class="nodeInfo" style="float: right !important;">
                            <span>{{ data.startTime }}</span>
                            <span>{{ data.endTime }}</span>
                            <span>{{ data.plannedHours }}</span>
                            <span>{{ data.precondition }}</span>
                            <span>{{ data.responsibleDepartment }}</span>
                            <span class="tree-btn"
                                  style="float: right !important; width: 280px;">
                                <el-button v-if="data.id != 0" type="primary"
                                           icon="el-icon-plus" size="mini"
                                           @click="() => append(data)">新增</el-button>
                                <el-button v-if="data.id != 0" type="warning"
                                           icon="el-icon-edit" size="mini"
                                           @click="() => nodeInfo(data)">修改</el-button>
                                <el-button v-if="data.id != 0" type="danger"
                                           icon="el-icon-minus" size="mini"
                                           @click="() => remove(node, data)">删除</el-button>
                            </span>
                        </div>
                      <!--  -->
                    </span>
        </el-tree>
      </el-col>
    </el-row>

    <!-- 项目节点新增 -->
    <el-dialog :title="appendNode.title" width="40%"
               :visible.sync="appendNode.status">
      <el-form ref="appendNodeFrom" :rules="appendNodeRules"
               :model="appendNodeFrom" label-width="160px">
        <el-form-item prop="label" label="节点名称">
          <el-input style="width: 350px;" placeholder="请输入节点名称"
                    v-model="appendNodeFrom.label"></el-input>
        </el-form-item>
        <el-form-item prop="responsibleDepartment" label="责任部门">
          <el-select v-model="appendNodeFrom.responsibleDepartment"
                     placeholder="请选择责任部门">
            <el-option v-for="item in departmentList" :label="item" :key="item"
                       value="item"></el-option>
            <!-- <el-option label="规土部" value="规土部"></el-option>
            <el-option label="财务部" value="财务部"></el-option>
            <el-option label="工程部" value="工程部"></el-option> -->
          </el-select>
          <!-- <el-input style="width: 350px;" placeholder="请输入责任部门" v-model="appendNodeFrom.responsibleDepartment"></el-input> -->
        </el-form-item>
        <el-form-item label="计划开始/结束时间">
          <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                          @change="separateTime(0)" v-model="timeValue"
                          type="daterange" range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="实际开始/结束时间">
          <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                          @change="separateTime(1)" v-model="timeValueActual"
                          type="daterange" range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item prop="plannedHours" label="计划工时">
          <el-input style="width: 350px;" placeholder="请输入计划工时"
                    v-model="appendNodeFrom.plannedHours"></el-input>
        </el-form-item>
        <el-form-item prop="precondition" label="前置条件">
          <el-input style="width: 350px;" placeholder="请输入前置条件"
                    v-model="appendNodeFrom.precondition"></el-input>
        </el-form-item>
        <el-form-item prop="desc" label="备注">
          <el-input type="textarea" :rows="3" style="width: 350px;"
                    placeholder="请输入备注"
                    v-model="appendNodeFrom.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('appendNodeFrom')">提交
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-dialog>
</div>
